<script setup>
import Son from './components/Son.vue'
import FancyButton from './components/FancyButton.vue'
import BaseLayout from './components/BaseLayout.vue'
import {ref,reactive} from "vue";
const msg = ref("打老虎");
const data = reactive({
  books:[
    "Java编程思想",
    "SpringBoot入门到入土"
  ],
  money: 9099
})
const user =reactive( {
  username:"张三",
  age:18
})


function changeMoney(val){
  data.money = data.money - val;
}
</script>
<!--  2、父组件给子组件传递数据：使用属性绑定  -->
<template>
  <h1>父组件</h1>
  <Son :msg="msg" :books="data.books" :money="data.money" :user="user" @buy="changeMoney"></Son>
<!--<FancyButton>-->
<!--</FancyButton>-->
<!--  <FancyButton>-->
<!--    click me-->
<!--  </FancyButton>-->
  <BaseLayout>
    <template v-slot:header>
      <!-- header 插槽的内容放这里 -->
      <h6>我是标题</h6>
    </template>
    <template v-slot:main>
      <!-- header 插槽的内容放这里 -->
      我是内容区域
    </template>
    <template v-slot:footer>
      <!-- header 插槽的内容放这里 -->
      <button>确认</button>
    </template>
  </BaseLayout>
</template>

<style scoped>

</style>
